前情提要

上次切了拉軸的版面，今天輪到比較輕鬆的頁面，做歡迎頁的動畫效果

觀察設計稿

這次的需求很簡單，就是讓五個IP在頁面載入時從底下浮現，並且希望有些微時間差，解法：
1.先將5個IP位置固定(用position: absolute依序固定)，但要留一個IP為relative當基準點，因為當所有的圖片都設置為position: absolute並且沒有正確定位時，它們可能會被疊在一起或移動到無法顯示的區域，導致圖片看起來“消失”了
2.使用transform: translateY(100%)來移動相當於圖片本身大小的垂直距離
3.animation-delay: 0.3s，此方法可以讓動畫延遲，但我後來沒有用他，因為他會先把圖片渲染一次才執行動畫，導致視覺效果不佳，後來只能透過animation-duration改變動畫持續時間，來達到時間差效果，直接上程式碼

<div class="bg-primary-light">
  <div
    class="container d-flex flex-column justify-content-center align-items-center"
  >
    <h1
      class="fw-bold"
      style="
        font-family: 'dongle';
        font-size: 110px;
        line-height: 100%; /* 110px */
        letter-spacing: -2.2px;
        padding-top: 144px;
        padding-bottom: 90px;
      "
    >
      Pals
    </h1>
    <div
      class="dolls-container position-relative"
      style="padding-top: 140px; margin: 0 -12px"
    >
      <img
        src="/assets/images/welcome/Mindfulness-S5.png"
        alt="doll-1"
        class="doll doll-1 end-0"
      />
      <img
        src="/assets/images/welcome/Concentration-S5.png"
        alt="doll-2"
        class="doll doll-2 top-0 end-0"
      />
      <img
        src="/assets/images/welcome/Walking-S5.png"
        alt="doll-3"
        class="doll doll-3 top-0 end-50 me-8"
      />
      <img
        src="/assets/images/welcome/Yoga-S5.png"
        alt="doll-4"
        class="doll doll-4 top-0 start-0 ms-21 mt-n4"
      />
      <img
        src="/assets/images/welcome/Zazen-S5.png"
        alt="doll-5"
        class="doll doll-5 top-0 start-0 mt-13"
      />
    </div>
  </div>
</div>

<style>
  .doll {
    animation: floatUp 0.8s ease forwards; /* 動畫 */
  }

  /* 每個娃娃不同的動畫延遲 */
  .doll-1 {
    position: relative;
    z-index: 8;
  }

  .doll-2 {
    position: absolute;
    animation-duration: 1.2s;
    z-index: 2;
  }

  .doll-3 {
    position: absolute;
    animation-duration: 1.2s;
    z-index: 2;
  }

  .doll-4 {
    position: absolute;
    animation-duration: 1s;
    z-index: 4;
  }

  .doll-5 {
    position: absolute;
    animation-duration: 1s;
    z-index: 6;
  }

  /* 定義娃娃浮上來的動畫 */
  @keyframes floatUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
</style>

這裡介紹一些 animation 常用的屬性以及幾種常見的動畫類型，一起快速掌握使用動畫效果

CSS Animation 屬性常用設定

1. animation-name

   • 指定動畫的名稱，對應 @keyframes 定義的動畫。
   • 例：animation-name: slideIn;

2. animation-duration

   • 指定動畫持續時間。
   • 例：animation-duration: 2s; （2秒）

3. animation-timing-function

   • 定義動畫的過渡方式（加速、減速等）。
   • 常見值：
     • ease（預設，先快後慢）
     • linear（匀速）
     • ease-in（加速）
     • ease-out（減速）
     • ease-in-out（先加速後減速）

4. animation-delay

   • 定義動畫開始之前的延遲時間。
   • 例：animation-delay: 1s; （延遲1秒後動畫開始）

5. animation-iteration-count

   • 定義動畫重複次數。
   • 例：
     • animation-iteration-count: 1;（動畫執行一次）
     • animation-iteration-count: infinite;（無限次重複）

6. animation-direction

   • 指定動畫的方向。
   • 常見值：
     • normal（正方向，從頭到尾）
     • reverse（反向，從尾到頭）
     • alternate（交替，先正向再反向）
     • alternate-reverse（交替，先反向再正向）

7. animation-fill-mode

   • 指定動畫開始或結束時元素的狀態。
   • 常見值：
     • none（動畫結束後恢復到初始狀態）
     • forwards（動畫結束後保持最後一幀的樣式）
     • backwards（動畫延遲期間應用起始樣式）
     • both（開始時應用起始樣式，結束時保持最後一幀樣式）

8. animation-play-state

   • 控制動畫的播放或暫停。
   • 常見值：
     • running（播放）
     • paused（暫停）

完整動畫範例

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity:0;
    transform: rotate(0deg);
  }
  to {
    transform: translateX(0);
    opacity:0;
    transform: rotate(360deg);
  }
}